import { reactive, onMounted, onUnmounted } from "vue";

export default function useMousePosition() {
	// 初始化坐标数据
	const point = reactive<MousePoint>({
		x: -1,
		y: -1,
	});

	const sayHi = () => {
		return "x:" + point.x + ",y:" + point.y;
	};

	// 用于收集点击事件坐标的函数
	const updatePosition = (e: any) => {
		point.x = e.pageX;
		point.y = e.pageY;
	};

	// 挂载后绑定点击监听
	onMounted(() => {
		document.addEventListener("click", updatePosition, {passive:true});
	});

	// 卸载前解绑点击监听
	onUnmounted(() => {
		document.removeEventListener("click", updatePosition);
	});

	return point;
}

interface MousePoint {
	x: number;
	y: number;
}